import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Form, Input, Upload, Select, Button, message } from 'antd';
import { connect } from 'dva';
import styles from './BaseView.less';


const FormItem = Form.Item;
const { Option } = Select;

@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
@Form.create()
class BaseView extends Component {
  constructor() {
    super();
    this.state = {

    };
  }

  componentDidMount() {
    const { dispatch, currentUser } = this.props;
    console.log(currentUser)
  }

  getViewDom = ref => {
    this.view = ref;
  };

  saveMessage = () => {
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'geographic/fetch',
            payload: { nick:userInfo.name },
            callback: res => {
              console.log('用户名称', res);
              // const userData = JSON.parse(localStorage.getItem('currentUser')) ;
              // userData.nick = userInfo.name;
              // console.log(userData)
              // window.localStorage.setItem("currentUser",JSON.stringify(userData) )
              location.reload()
              if(res.code===0){
                message.success(`${res.msg}`)
              }
            },
          });
        });
      }
    })
  }

  render() {
    const { currentUser } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <div className={styles.backgroundp}>
        <div className={styles.baseView} ref={this.getViewDom}>
          <div className={styles.left}>
            <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
              <FormItem label={formatMessage({ id: 'app.settings.basic.email' })}>
                {getFieldDecorator('email', {
                  initialValue: currentUser._id
                })(
                  <Input disabled={true} />
                )}
              </FormItem>
              <FormItem label={formatMessage({ id: 'app.settings.basic.nickname' })}>
                {getFieldDecorator('name', {
                  initialValue: currentUser.nick,
                  rules: [
                    {
                      required: true,
                      message: formatMessage({ id: 'app.settings.basic.nickname-message' }, {}),
                    },
                  ],
                })(<Input allowClear />)}
              </FormItem>
              <FormItem label={formatMessage({ id: 'app.settings.basic.phone' })}>
                {getFieldDecorator('phone', {
                  initialValue: currentUser.phone
                })(<Input disabled={true} />)}
              </FormItem>
              <Button type="primary" onClick={this.saveMessage}>
                <FormattedMessage
                  id="app.settings.basic.update"
                  defaultMessage="Update Information"
                />
              </Button>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(BaseView);
